<link rel="stylesheet" href="components/template/file/fileCommon.css"/>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body layui-text" style="color: #333;">
            以下是静态页面，后台集成示例参考
            <a href="https://gitee.com/whvse/easy-fs" target="_blank">获取源码</a>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">当前位置：<span id="tvFP">/</span></div>
        <div class="layui-card-body">
            <div class="btnDiv">
                <button id="btnBack" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"><i class="layui-icon">&#xe65c;</i>返回上级
                </button>
                <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"><i class="layui-icon">&#xe669;</i>刷新
                </button>
                <button id="btnUpload" class="layui-btn layui-btn-sm layui-btn-normal icon-btn"><i class="layui-icon">&#xe681;</i>上传文件
                </button>
                <button id="btnDilaog" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"><i class="layui-icon">&#xe634;</i>弹窗选择
                </button>
            </div>

            <div class="file-list">
            </div>

        </div>
    </div>
</div>

<!-- 下拉菜单 -->
<div class="dropdown-menu dropdown-anchor-top-left fixed" id="dropdownFile">
    <div class="dropdown-anchor"></div>
    <ul>
        <li><a id="open"><i class="layui-icon layui-icon-file"></i>&emsp;查看&emsp;</a></li>
        <li><a id="copy"><i class="layui-icon layui-icon-release"></i>&emsp;复制&emsp;</a></li>
        <li>
            <a id="del" style="color: red !important;">
                <i class="layui-icon layui-icon-delete" style="font-size: 19px;"></i>&nbsp;&nbsp;&nbsp;删除&emsp;
            </a>
        </li>
    </ul>
</div>

<!-- 渲染模板 -->
<script id="fileTpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="file-list-item" data-dir="{{item.isDir}}" data-url="{{item.url}}" data-name="{{item.name}}">
        <div class="file-list-img {{item.hasSm?'media':''}}">
            {{# if(item.hasSm){ }}
            <img src="{{item.smUrl}}"/>
            {{# }else{ }}
            <img src="components/template/file/fti/{{item.type}}.png"/>
            {{# } }}
        </div>
        <div class="file-list-name">{{item.name}}</div>
    </div>
    {{#  }); }}
    {{# if(d.length<=0){ }}
    <div class="list-empty">
        <i class="layui-icon layui-icon-face-surprised"></i>
        <div>没有文件</div>
    </div>
    {{# } }}
</script>

<script type="text/javascript" src="assets/libs/jquery/clipboard.min.js"></script>
<script>
    layui.use(['jquery', 'layer', 'element', 'upload', 'laytpl', 'util'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var upload = layui.upload;
        var laytpl = layui.laytpl;
        var util = layui.util;

        // 渲染文件列表
        function renderList(dir) {
            if (!dir) {
                dir = $('#tvFP').text();
            }
            layer.load(2);
            $.get('components/template/file/files.json', {
                dir: dir
            }, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    laytpl(fileTpl.innerHTML).render(res.data, function (html) {
                        $('.file-list').html(html);
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            });
        }

        renderList();

        // 上传文件事件
        upload.render({
            elem: '#btnUpload',
            url: 'components/template/file/ok.json',
            choose: function (obj) {
                layer.load(2);
            },
            done: function (res, index, upload) {
                layer.closeAll('loading');
                if (res.code != 200) {
                    layer.msg(res.msg, {icon: 2});
                } else {
                    layer.msg(res.msg, {icon: 1});
                    $('#tvFP').text(util.toDateString(new Date(), '/yyyy/MM/dd'));
                    renderList();
                }
            },
            error: function () {
                layer.closeAll('loading');
                layer.msg('上传失败', {icon: 2});
            },
            accept: 'file'
        });

        // 刷新
        $('#btnRefresh').click(function () {
            renderList();
        });

        var mUrl;
        // 列表点击事件
        $('body').on('click', '.file-list-item', function (e) {
            var isDir = $(this).data('dir');
            var name = $(this).data('name');
            mUrl = $(this).data('url');
            $('#copy').attr('data-clipboard-text', mUrl);
            if (isDir) {
                var cDir = $('#tvFP').text();
                cDir += (cDir == '/' ? name : ('/' + name));
                $('#tvFP').text(cDir);
                renderList(cDir);
            } else {
                var $target = $(this).find('.file-list-img');
                $('#dropdownFile').css({
                    'top': $target.offset().top + 90,
                    'left': $target.offset().left + 25
                });
                $('#dropdownFile').addClass('dropdown-opened');
                if (e !== void 0) {
                    e.preventDefault();
                    e.stopPropagation();
                }
            }
        });

        // 返回上级
        $('#btnBack').click(function () {
            var cDir = $('#tvFP').text();
            if (cDir == '/') {
                // layer.msg('已经是根目录', {icon: 2})
            } else {
                cDir = cDir.substring(0, cDir.lastIndexOf('/'));
                if (!cDir) {
                    cDir = '/';
                }
                $('#tvFP').text(cDir);
                renderList(cDir);
            }
        });

        // 点击空白隐藏下拉框
        $('html').off('click.dropdown').on('click.dropdown', function () {
            $('#copy').attr('data-clipboard-text', '');
            $('#dropdownFile').removeClass('dropdown-opened');
        });

        // 打开
        $('#open').click(function () {
            window.open(mUrl);
        });
        // 删除
        $('#del').click(function () {
            layer.confirm('确定要删除此文件吗？', function () {
                layer.load(2);
                $.get('components/template/file/ok.json', {
                    file: mUrl
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        renderList();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                });
            });
        });
        // 复制
        var clipboard = new ClipboardJS('#copy');
        clipboard.on('success', function (e) {
            e.clearSelection();
            layer.msg('文件地址已复制', {icon: 1});
        });
        clipboard.on('error', function (e) {
            layer.msg('复制失败，请手动复制', {icon: 2});
        });

        // 弹窗模式
        $('#btnDilaog').click(function () {
            layer.open({
                type: 2,
                title: '选择文件',
                content: 'components/template/file/fileChoose.html?multi=true&maxNum=3',
                area: ['600px', '420px'],
                offset: '50px',
                shade: .1,
                fixed: false,
                resize: false,
                end: function () {
                    if (typeof(mFsUrls) != "undefined" && mFsUrls.length > 0) {
                        layer.msg('你选择了：' + JSON.stringify(mFsUrls), {icon: 1});
                        mFsUrls = undefined;
                    }
                }
            });
        });

    });
</script>